<template>
	<view>
		<view class="order-box">
			<view class="flex-row justify-between items-center">
				<view class="font_4 font_1">订单信息</view>
				<view class="flex-row items-center group_11">
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>
		</view>
		<view class="quote-box">
			<me-select ref="meSelect" :editModel="true" @change="change" @finish="finish" @itemClick="itemClick"
				:datalist="dataList" :options="options">
				
				
				<!-- #ifdef MP-WEIXIN -->
				<template  v-slot:list="{slot}">
					<view class="select-item"  v-if="slot.item.price">
						<!-- 这里可以写自己的模板 -->
						<view class="top  flex-row justify-between items-center"  style="height:60rpx;padding:8px;margin-right:10px;font-szie:26rpx;color:#000;font-weight:bold"  >
							<text class="name ">{{slot.item.name}} 给出价格</text>
							<text class="price " style="margin-left:20rpx;">¥{{slot.item.price}}</text>
							<text class="price " style="align-content:center;display: inline-block;margin-left:20rpx; background: #ffd701;padding:10px 20px;border-radius: 10px; ">选他</text>
						</view>
					<!-- 	<view class="taps">
							推荐指数 {{slot.slotScope.item.sellerStar}}分
						</view> -->
						<view class="desc">
							{{slot.item.remark}}
						</view>
					</view>
				</template>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<template v-slot:list="slot">
					<view class="select-item">
						<!-- 这里可以写自己的模板 -->
						<view class="top">
							<text class="name">{{slot.slotScope.item.name}}</text>
							<text class="price">¥{{slot.slotScope.item.price}}</text>
						</view>
				<!-- 		<view class="taps">
							推荐指数 {{slot.slotScope.item.remc}}分
						</view> -->
						<view class="desc">
							{{slot.slotScope.item.desc}}
						</view>
					</view>
				</template>
				<!-- #endif -->
				
																	 
																	 
				

			</me-select>
		</view>
		<view class="quote-foot">
			<view class="flex-row justify-between items-center">
				<view class="font_4">温馨提示：(1)上门接宠、送宠到家一般主要针对城区及..</view>
				<view class="flex-row items-center group_11">
					<image class="image_4 image_9"
						src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
				</view>
			</view>
			<view class="zengzhi">
				增值服务: <text class="tag">上门接宠</text><text class="tag">送宠到家</text><text class="tag">提供笼具</text>
			</view>
			<view class="quote-btns">
				<view class="quote-total">
					预计费用:<text class="price">￥332</text><text class="info">查看明细</text>
				</view>
				<view class="quote-submit" @click="yuyue">
					预约下单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	export default {
		data() {
			return {
				star: 3,
				isflag: true,
				orderNo: "",
				options: {
					editModel: true,
					flags: ['type'], //设置需要返回的参数这个参数必须在 dataList 中的item中存在（不配置默认全部返回）
					itemCanSelect: true //是否开启点击列表页选择配置
				},
				dataList: [],
				quoteType: 0,
			}
		},
		onLoad(options) {
			console.log("options", options)
			this.orderNo = options.orderNo
			this.init();
		},
		methods: {
			changeModel() {
				this.$refs.meSelect.changeModel()
			},
			getSelectAll() {
				var result = this.$refs.meSelect.getSelectAll()
				console.log('当前全选：', result)
			},
			itemClick(e) {
				console.log('列表点击了：', e)
			},
			finish(e) {
				console.log('所有的选择：', e)
			},
			change(e) {
				console.log('发生改变了：', e);
				this.quoteType = e[0] ? e[0].type : 0;
			},
			init() {
				let self = this;
				if (!this.isflag) {
					return
				}
				this.isflag = false;
				$.ajax({
					url: API.getTyServiceApi,
					data: {
						orderNo: this.orderNo
					},
					method: 'GET',
					loading: true,
					loadingText: "获取报价" + ['…'],
					success(res) {
						console.log("res", res)
						let data = res.data;
						data.forEach(item => {
							item['select'] = false
						})
						self.dataList = data;
						self.isflag = true;
					}
				})
			},
			yuyue() {
				let self = this;
				console.log('this.quoteType：', this.quoteType)
				if (!this.quoteType) {
					$.$toast("请选择报价");
					return
				}
				if (!this.isflag) {
					return
				}
				this.isflag = false;
				$.ajax({
					url: API.selectTyServiceApi,
					data: {
						type: this.quoteType,
						orderNo: this.orderNo,
					},
					method: 'POST',
					loading: true,
					loadingText: "预约下单" + ['…'],
					success(res) {
						let info = res.data;
						self.go('/pages/ys/order/entrust');
						self.isflag = true
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../../static/css/style.css');

	.quote-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 32rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;

		.quote-btns {
			margin-top: 26rpx;
			display: flex;
			justify-content: space-between;

			.quote-total {
				line-height: 80rpx;
				height: 80rpx;
			}

			.price {
				font-size: 42rpx;
				color: red;
				margin-left: 8rpx;
				font-weight: 700;
			}

			.info {
				color: #0055ff;
				margin-left: 8rpx;
			}

			.quote-submit {
				line-height: 80rpx;
				height: 80rpx;
				padding: 0 32rpx;
				background: orange;
				color: #000;
				font-weight: 700;
				font-size: 32rpx;
				border-radius: 64rpx;
			}
		}

		.zengzhi {
			margin-top: 32rpx;
			font-size: 28rpx;

			.tag {
				padding: 12rpx;
				border: 1rpx solid orange;
				margin: 0 8rpx;
				border-radius: 32rpx;

			}
		}
	}

	.order-box {
		padding: 32rpx;
		background: #fff;
	}

	.quote-box {
		padding: 0 32rpx;
		background: #fff;
		margin-top: 32rpx;

		.select-item {
			border-bottom: 1rpx solid #eee;
			padding-bottom: 16rpx;

			.top {
				margin-bottom: 8rpx;
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.price {
					color: red;
				}
			}

			.taps {
				margin-bottom: 8rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.font_4 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #081329;
	}

	.font_1 {
		font-size: 32rpx;
		font-weight: 700;
	}

	.group_8 {
		width: 75rpx;
	}

	.image_4 {
		width: 32rpx;
		height: 32rpx;
	}


	.image_9 {
		display: inline-block;
		vertical-align: middle;
	}
</style>
